<template>
  <view class="transferMoney-box">
    <view class="transfer-content">
      <text class="input-title">转账手机号</text>
      <input v-model="phone" :maxlength="11" style="margin-bottom: 26rpx;" type="number" @input="phoneInput">
      <text class="user-name">{{ userNickname }}</text>
      <text class="input-title">转账金额</text>
      <input v-model="amount" style="margin-bottom: 20rpx;" type="number">
      <text class="content-foot-title">余额: {{ setDecimalPoint(userInfo.pay_points
      ) }} 乐享豆</text>
    </view>
    <view class="foot-btn" @click="openTo">
      立即转账
    </view>
    <u-popup v-model="show" mode="center">
      <view class="popup-content">
        <text class="popup-title">请输入支付密码</text>
        <u-message-input :maxlength="6" focus dot-fill mode="bottomLine" @finish="onsubmit"></u-message-input>
      </view>
    </u-popup>
  </view>
</template>

<script>
import * as UserAPI from '@/api/user.js';
import * as withdrawApi from '@/api/withdrawCash/index.js';
export default {
  data() {
    return {
      userInfo: {},
      phone: '',
      amount: '',
      show: false,
      userNickname: '',
      userId: ''
    };
  },

  onLoad() {
    this.getUserInfo();
  },

  methods: {
    // 手机号码输入事件
    phoneInput(e) {
      const that = this;
      const innerValue = e.detail.value.trim();
      if (innerValue.length === 11) {
        const obj = {
          mobile: innerValue
        }
        withdrawApi.transferUser(obj).then(res => {
          if (res.status === 200) {
            that.userNickname = res.data.nick_name;
            that.userId = res.data.user_id
          }
        })
      }
    },
    // 输入完密码之后提交转账
    onsubmit(value) {
      const obj = {
        pid: this.userId,
        money: this.amount.trim(),
        pay_password: value
      }
      UserAPI.setTransferPay(obj).then(res => {
        if (res.status === 200) {
          uni.showToast({
            title: res.message,
            duration: 2000
          });
          this.show = false;
          this.phone = '';
          this.amount = '';
          this.userNickname = '';
          this.userId = '';
          this.getUserInfo();
        }
      })
    },
    // 点击立即转账
    openTo() {
      if (this.phone.trim() === '') {
        uni.showToast({
          title: '请输入手机号',
        })
        return;
      } else if (this.amount.trim() === '') {
        uni.showToast({
          title: '请输入金额',
        })
        return;
      } else {
        this.show = true
      }
    },
    // 获取用户信息
    getUserInfo() {
      const that = this;
      UserAPI.info().then(res => {
        if (res.status === 200) {
          that.userInfo = res.data.userInfo;
        }
      })
    },
    setDecimalPoint(str) {
      if (String(str).indexOf(".") !== -1) {
        return String(str).substr(0, String(str).indexOf(".") + 3)
      } else {
        return `${str}.00`
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.transferMoney-box {
  height: 100%;
  background-color: #fafafa;
  padding: 0 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .transfer-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32rpx 16rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: 8%;

    input {
      border-radius: 12rpx;
      padding: 12rpx 26rpx;
      background-color: #ededed;
    }

    .user-name {
      margin-left: 12rpx;
      margin-bottom: 16rpx;
      color: #c59a46;
    }
  }

  .input-title {
    font-size: 28rpx;
    font-weight: 400;
    color: #111;
    margin-left: 20rpx;
    margin-bottom: 16rpx;
  }

  .content-foot-title {
    font-size: 24rpx;
    font-weight: 500;
    color: #111;
    margin-left: 16rpx;
  }

  .foot-btn {
    padding: 16rpx;
    text-align: center;
    width: 80%;
    border-radius: 20px;
    color: #fff;
    background-color: #f73126;
    margin-bottom: 10%;
  }

  .popup-content {
    padding: 32rpx;

    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
    }
  }
}
</style>